<template>
  <h1>供应商管理</h1>
  <el-table :data="providerList" stripe>
    <el-table-column prop="providerName" label="供应商名称"></el-table-column>
    <el-table-column prop="providerLeader" label="负责人"></el-table-column>
    <el-table-column prop="providerScope" label="经营范围"></el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="primary" @click="findProvider(scope.row.providerId)">查看</el-button>
        <el-button type="primary" @click="updateProvider(scope.row.providerId)">修改信息</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination v-model:current-page="curPage" v-model:page-size="pageSize" background
                 :total="total" @current-change="reload"></el-pagination>

  <div style="margin-top: 20px">
    <el-button type="primary" @click="addDialog">添加供应商</el-button>
  </div>

  <el-dialog v-model="dialogVisible" title="添加供应商信息" width="30%">
    <el-form :model="providerForm" ref="providerForm" :rules="rules">
      <el-form-item label="供应商名称" prop="providerName">
        <el-input v-model="providerForm.providerName"></el-input>
      </el-form-item>
      <el-form-item label="负责人" prop="providerLeader">
        <el-input v-model="providerForm.providerLeader"></el-input>
      </el-form-item>
      <el-form-item label="负责人电话" prop="phoneNumber">
        <el-input v-model="providerForm.phoneNumber"></el-input>
      </el-form-item>
      <el-form-item label="供应商地址" prop="providerAddress">
        <el-input v-model="providerForm.providerAddress"></el-input>
      </el-form-item>
      <el-form-item label="经营范围" prop="providerScope">
        <el-input v-model="providerForm.providerScope"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
       <el-button type="primary" @click="addProvider">添加</el-button>
      </span>
    </template>
  </el-dialog>

  <el-dialog v-model="lookVisible" title="供应商信息详情" width="30%">
    <el-form :model="providerForm">
      <el-form-item label="供应商名称" prop="providerName">
        <span>{{ providerForm.providerName }}</span>
      </el-form-item>
      <el-form-item label="负责人" prop="providerLeader">
        <span>{{ providerForm.providerLeader }}</span>
      </el-form-item>
      <el-form-item label="负责人电话" prop="phoneNumber">
        <span>{{ providerForm.phoneNumber }}</span>
      </el-form-item>
      <el-form-item label="供应商地址" prop="providerAddress">
        <span>{{ providerForm.providerAddress }}</span>
      </el-form-item>
      <el-form-item label="经营范围" prop="providerScope">
        <span>{{ providerForm.providerScope }}</span>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
       <el-button type="primary" @click="lookVisible=false">确定</el-button>
      </span>
    </template>
  </el-dialog>

  <el-dialog v-model="updateVisible" title="修改供应商信息" width="30%">
    <el-form :model="providerForm" ref="providerForm" :rules="rules">
      <el-form-item prop="providerId" hidden></el-form-item>
      <el-form-item label="供应商名称" prop="providerName">
        <span>{{ providerForm.providerName }}</span>
      </el-form-item>
      <el-form-item label="负责人" prop="providerLeader">
        <el-input v-model="providerForm.providerLeader"></el-input>
      </el-form-item>
      <el-form-item label="负责人电话" prop="phoneNumber">
        <el-input v-model="providerForm.phoneNumber"></el-input>
      </el-form-item>
      <el-form-item label="供应商地址" prop="providerAddress">
        <span>{{ providerForm.providerAddress }}</span>
      </el-form-item>
      <el-form-item label="经营范围" prop="providerScope">
        <span>{{ providerForm.providerScope }}</span>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
       <el-button type="primary" @click="xiugai">修改</el-button>
      </span>
    </template>
  </el-dialog>
  <el-row>
    <el-col :span="10">
      <div class="app-container" style="margin-top: 30px">
        <el-upload
            class="upload-demo"
            ref="upload"
            :action="uploadUrl()"
            :data="uploadData"
            :file-list="fileList"
            :on-error="uploadFalse"
            :on-success="uploadSuccess"
            :before-upload="beforeAvatarUpload">
          <el-button style="margin-left: 10px;" size="small" type="success">批量导入</el-button>
          <div slot="tip" class="el-upload__tip">只能上传excel文件</div>
        </el-upload>
      </div>
    </el-col>
    <el-col :span="14">
      <div style="width: 150px;margin-left: 200px">
        <span>供应商名称</span>
        <el-input v-model="findName"></el-input>
        <span>经营范围</span>
        <el-input v-model="findScope"></el-input>
        <el-button type="primary" @click="reload">查询</el-button>
      </div>
    </el-col>
  </el-row>


</template>

<script>
import axios from "axios"
import {ElMessage} from "element-plus";

export default {
  created() {
    this.reload();
  },
  name: "Provider",
  data() {
    return {
      providerList: [],
      providerForm: {},
      dialogVisible: false,
      lookVisible: false,
      updateVisible: false,
      curPage: 1,
      pageSize: 5,
      total: 0,
      findName: '',
      findScope: '',
      rules: {
        providerName: [{required: true, message: '请输入供应商名称', trigger: 'blur'}],
        providerLeader: [{required: true, message: '请输入负责人姓名', trigger: 'blur'}],
        phoneNumber: [{required: true, message: '请输入电话号码', trigger: 'blur'},
          {
            pattern: /^[1]([3-9])[0-9]{9}$/, message:
                '请输入正确的电话号码', trigger: 'blur'
          }],
        providerAddress: [{required: true, message: '请输入供应商地址', trigger: 'blur'}],
        providerScope: [{required: true, message: '请输入供应商经营范围', trigger: 'blur'}]
      }
    }
  },
  methods: {
    findProvider(providerId) {
      let param = new URLSearchParams();
      param.append("providerId", providerId);
      axios.post("/api/provider/findProviderById", param).then(response => {
        this.providerForm = response.data;
        this.lookVisible = true;
      })
    },
    updateProvider(providerId) {
      let param = new URLSearchParams();
      param.append("providerId", providerId);
      axios.post("/api/provider/findProviderById", param).then(response => {
        this.providerForm = response.data;
        this.updateVisible = true;
      })
    },
    xiugai() {
      this.$refs.providerForm.validate((valid) => {
        if (valid) {
          axios.post("/api/provider/modifyProvider", this.providerForm).then(response => {
            if (response.data == 'success') {
              this.reload();
              this.updateVisible = false;
              ElMessage({
                message: '修改成功',
                type: 'success'
              })
            } else {
              ElMessage({
                message: '修改失败，请联系管理员',
                type: 'error'
              })
            }
          })
        } else {
          ElMessage.error("请输入正确的数据")
        }
      });

    },
    addDialog() {
      this.providerForm = {};
      this.dialogVisible = true;
    },
    addProvider() {
      this.$refs.providerForm.validate((valid) => {
        if (valid) {
          axios.post("/api/provider/addProvider", this.providerForm).then(response => {
            if (response.data == 'success') {
              this.reload();
              this.dialogVisible = false;
              ElMessage({
                message: '添加成功',
                type: 'success'
              })
            } else {
              ElMessage({
                message: '添加失败，请联系管理员',
                type: 'error'
              })
            }
          })
        } else {
          ElMessage.error("请填入正确的数据")
        }
      });
    },
    reload() {
      let param = {
        "pageNo": this.curPage,
        "pageSize": this.pageSize,
        "t": {
          "providerName": this.findName,
          "providerScope": this.findScope
        }
      }
      axios.post("/api/provider/findProvidersByPage", param).then(response => {
        let data = response.data;
        this.providerList = data.records;
        this.curPage = data.current;
        this.total = data.total;
      })
    },
    uploadUrl: function () {
      return (
          "/api/provider/importExcel"
      );
    },
    uploadSuccess(response, file, fileList) {
      if (response != null) {
        this.reload();
      } else {
        alert("文件导入失败");
      }
    },
    uploadFalse(response, file, fileList) {
      alert("文件上传失败！");
    },
    // 上传前对文件的大小的判断
    beforeAvatarUpload(file) {
      const extension = file.name.split(".")[1] === "xls";
      const extension2 = file.name.split(".")[1] === "xlsx";
      const isLt2M = file.size / 1024 / 1024 < 10;
      if (!extension && !extension2) {
        alert("上传模板只能是 xls、xlsx 格式!");
      }
      if (!isLt2M) {
        console.log("上传模板大小不能超过 10MB!");
      }
      return (extension || extension2) && isLt2M;
    },

  }
}
</script>

<style>
</style>